<template>
    <view :style="{ '--color': color }">
        <u-popup :show="true" @close="close" mode="bottom" :round="10" closeable>
            <view class="Wrapper">
                <view class="head">选择收货地址</view>
                <view class="content">
                    <!-- <view class="Wechat" @click="chooseAddress">
						<view class="d-flex a-center">
							<view class="iconfont icon-weixin color_wechat size44"></view>
							<text class="wechat_address">获取微信收货地址</text>
						</view>
						<view class="iconfont icon-xiangyouxiayiye color_99 h6"></view>
					</view> -->

                    <view class="List" v-for="(item, index) in pageData" :key="item.id" @click="ToggleAddress(item.id)">
                        <view class="List_icon" :class="{ Active: item.id == Address.id }">
                            <text class="icon-xuanzhong iconfont size28"></text>
                        </view>
                        <view class="List_box">
                            <text class="List_box_address">{{ item.Aregion }}{{ item.Aaddress }}{{ item.room_number }}</text>
                            <view class="List_box_info">
                                <view class="downtown_More" v-if="item.is_default == 1">默认</view>
                                <text class="infoTxt">{{ item.Aname }}</text>
                                <text class="infoTxt">{{ item.Amobile }}</text>
                            </view>
                        </view>
                        <view class="iconfont icon-bianji color_99 size36" @click.stop="EditAddress(item)"></view>
                    </view>

                    <emptys empty="address" v-if="!pageData.length"></emptys>
                </view>
                <view class="footer">
                    <view class="newCreat" @click="newAdd">新增地址</view>
                </view>
            </view>
        </u-popup>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    export default {
        props: ['Address'],
        data() {
            return {
                pageData: []
            };
        },
        created() {
            this.getAddress();
        },
        methods: {
            getAddress() {
                this.$showLoading('');
                this.$http
                    .post({
                        url: '/zzj_singleSaleApi/getAddress'
                    })
                    .then((res) => {
                        this.$hideLoading();
                        if (res.code != '100') return this.$Toast(res.msg);
                        const result = res.data || [];
                        this.pageData = result;
                    });
            },
            ToggleAddress(id) {
                this.$http
                    .get({
                        url: '/zzj_singleSaleApi/saveDefaultAddress',
                        data: {
                            id
                        }
                    })
                    .then((res) => {
                        if (res.code != 100) return this.$Toast(res.msg);
                        this.$emit('Update');
                        this.close();
                    });
            },
            EditAddress(item) {
                this.toUrl(`/orderPage/Addresslist/editAddress?id=${item.id}&bid=${item.bid}&type=2`);
                this.close();
            },
            async chooseAddress() {
                const addressResult = await this.$pop.chooseAddress();
                if (addressResult) this.getAddress();
            },
            newAdd() {
                this.toUrl(`/orderPage/Addresslist/editAddress?type=1`);
                this.close();
            },
            close() {
                this.$emit('close');
            }
        },
        watch: {
            Address: {
                immediate: true,
                handler(newVal) {
                    if (newVal) this.getAddress();
                }
            }
        },
        computed: {
            ...mapState(['color'])
        }
    };
</script>

<style lang="scss" scoped>
    @mixin Fleac {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .Wrapper {
        width: 100%;

        .head {
            width: 100%;
            display: flex;
            justify-content: center;
            padding: 30rpx 0 30rpx;
            color: #000;
            font-size: 34rpx;
        }

        .content {
            width: 100%;
            background-color: #f7f8fa;
            height: 800rpx;
            padding: 24rpx;
            overflow-y: scroll;

            .Wechat {
                width: 100%;
                height: 86rpx;
                background-color: #ffffff;
                border-radius: 10rpx;
                display: flex;
                padding: 0 24rpx;
                justify-content: space-between;
                align-items: center;

                .wechat_address {
                    color: #343434;
                    font-size: 28rpx;
                    margin-left: 16rpx;
                }
            }

            .List {
                width: 100%;
                padding: 24rpx 0 24rpx 24rpx;
                background-color: #ffffff;
                margin-top: 24rpx;
                border-radius: 10rpx;
                display: flex;
                align-items: center;

                &_icon {
                    width: 36rpx;
                    height: 36rpx;
                    border: 1px solid #ccc;
                    border-radius: 50%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }

                .Active {
                    background-color: var(--color);
                    border: 1px solid var(--color) !important;
                }

                &_box {
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    padding: 0 10rpx 0 24rpx;

                    &_address {
                        color: #000;
                        font-size: 30rpx;
                    }

                    &_info {
                        display: flex;
                        align-items: center;
                        margin-top: 16rpx;

                        .downtown_More {
                            background-color: var(--color);
                            color: #ffffff;
                            font-size: 20rpx;
                            padding: 0 10rpx;
                            border-radius: 20rpx;
                            margin-right: 10rpx;
                        }

                        .infoTxt {
                            color: #999;
                            font-size: 28rpx;
                            margin-right: 10rpx;
                        }
                    }
                }

                .icon-bianji {
                    padding: 24rpx;
                }
            }
        }

        .footer {
            width: 100%;
            height: 100rpx;
            @include Fleac;

            .newCreat {
                @include Fleac;
                width: 600rpx;
                height: 70rpx;
                background-color: var(--color);
                border-radius: 35rpx;
                color: #ffffff;
                font-size: 32rpx;
            }
        }
    }
</style>